import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:percent_indicator/percent_indicator.dart';

/// 自定义网络图片组件
/// 支持加载进度指示器、占位图和错误图
/// [imageUrl] 图片链接
/// [httpHeaders] http请求头
/// [width] 图片宽度
/// [height] 图片高度
/// [fit] 图片适应方式
/// [placeholder] 占位图
/// [errorWidget] 错误图
/// [fadeInDuration] 渐变时间
/// [borderRadius] 圆角
/// [showProgressIndicator] 是否显示加载进度指示器
class AdvancedNetworkImage extends StatelessWidget {
  final String imageUrl;
  final Map<String, String>? httpHeaders;
  final double? width;
  final double? height;
  final BoxFit fit;
  final Widget? placeholder;
  final Widget? errorWidget;
  final Duration fadeInDuration;
  final BorderRadius? borderRadius;
  final bool showProgressIndicator;

  const AdvancedNetworkImage({
    Key? key,
    required this.imageUrl,
    this.httpHeaders,
    this.width,
    this.height,
    this.fit = BoxFit.cover,
    this.placeholder,
    this.errorWidget,
    this.fadeInDuration = const Duration(milliseconds: 500),
    this.borderRadius,
    this.showProgressIndicator = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: borderRadius ?? BorderRadius.zero,
      child: CachedNetworkImage(
        httpHeaders: httpHeaders,
        imageUrl: imageUrl,
        width: width,
        height: height,
        fit: fit,
        progressIndicatorBuilder: showProgressIndicator
            ? (context, url, progress) => _buildProgressIndicator(progress)
            : null,
        placeholder: (context, url) =>
            placeholder ?? _buildDefaultPlaceholder(),
        errorWidget: (context, url, error) =>
            errorWidget ?? _buildDefaultErrorWidget(),
        fadeInDuration: fadeInDuration,
      ),
    );
  }

  /// 加载进度指示器
  Widget _buildProgressIndicator(DownloadProgress progress) {
    double percent = progress.progress != null ? progress.progress! / 100 : 0.0;

    return Stack(
      alignment: Alignment.center,
      children: [
        _buildDefaultPlaceholder(),
        CircularPercentIndicator(
          radius: 20.0,
          lineWidth: 3.0,
          percent: percent,
          center: Text(
            "${(percent * 100).toStringAsFixed(0)}%",
            style: const TextStyle(fontSize: 10, color: Colors.white),
          ),
          progressColor: Colors.blue,
        ),
      ],
    );
  }

  /// 默认占位图
  Widget _buildDefaultPlaceholder() {
    return Container(
      color: Colors.grey[200],
      child: Center(
        child: Icon(
          Icons.image,
          color: Colors.grey[400],
        ),
      ),
    );
  }

  /// 默认错误图
  Widget _buildDefaultErrorWidget() {
    return Container(
      color: Colors.grey[200],
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.error_outline, color: Colors.grey[400]),
            const SizedBox(height: 4),
            Text('Failed',
                style: TextStyle(color: Colors.grey[600], fontSize: 12))
          ],
        ),
      ),
    );
  }
}
